<template>
	<a-drawer :title="title" :width="500" @close="handleCancel" :visible="visible" :maskClosable="false" :bodyStyle="{ paddingBottom: '60px' }">
		<a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
			<!-- 登录账号 -->
			<a-form-model-item label="职务编码" prop="code" ref="code">
				<a-input :placeholder="placeholder.code" v-model="form.code" :disabled="isUpdate" />
			</a-form-model-item>
			<a-form-model-item  label="职务名称" prop="name" ref="name">
				<a-input :placeholder="placeholder.name" v-model="form.name" />
			</a-form-model-item>
			<a-form-model-item  label="显示排序" prop="sort" ref="sort">
				<a-input :placeholder="placeholder.sort" v-model.number="form.sort" />
			</a-form-model-item>
			<a-form-model-item  label="备注" prop="description" ref="description">
		  <a-textarea  :placeholder="placeholder.description" :rows="4"
		    v-model="form.description"
		   />
		 </a-form-model-item>
		</a-form-model>
		<!-- Modal 页脚 -->
		<footer class="drawer-footer"><a-button type="primary" :loading="loading" @click="onSubmit">保存</a-button></footer>
	</a-drawer>
</template>
<script>
import { positionAdd, positionUpdate } from '../public/http.js';
export default {
	props: ['editRecord'],
	data() {
		return {
			isUpdate: false, //是否是更新模式
			loading: false, //按钮Loading
			title: '新增职务',
			visible: true, //modal 显示状态
			labelCol: {
				xs: {
					span: 24
				},
				sm: {
					span: 5
				}
			},
			wrapperCol: {
				xs: {
					span: 24
				},
				sm: {
					span: 16
				}
			},
			positionStatusOPT: [], //职务属性字段选项

			placeholder: {
				code: '职务编码',
				name: '职务名称',
				sort:'职务排序',
				description: '职务备注'
			},
			form: {
				code: "",
				name: "",
				sort:10,
				description: null
			},
			rules: {
				code: [
					{
						required: true,
						message: '请设置职务编码',
						trigger: 'blur'
					},
					{
						max: 20,
						message: '职务编码最多设置20个字符',
						trigger: 'blur'
					},
					{
						pattern: /^[a-zA-Z0-9_]+$/,
						message: '职务编码只允许使用数字或字母',
						trigger: 'blur'
					}
				],
				name: [
					{
						required: true,
						message: '请设置职务名称',
						trigger: 'blur'
					},
					{
						max: 50,
						message: '职务名称最多设置50个字符',
						trigger: 'blur'
					}
				],
				sort: [
					{
						required: true,
						type:"number",
						message: '请设置一个数字作为岗位排序',
						trigger: 'blur'
					},
					//自定义方法一个
					{
						validator: (rule, value, callback) => {
							if (value<0 ||value>=1000) {
								callback(new Error('排序数字不能超过3位数!'));
							} else {
								callback();
							}
						},
						trigger: 'blur'
					}
				],
				description: [
					{
						required: false,
						max: 200,
						message: '备注信息请设置在200个字符以内',
						trigger: 'blur'
					}
				]
			},
			sysRoleList: [], //当前系统拥有的权限列表
		};
	},
	methods: {
		//多选菜单
		onChange(checkedValues) {
			this.form.roleArr = checkedValues;
		},
		//表单提交事件
		onSubmit() {
			this.$refs.ruleForm.validate(valid => {
				//验证成功后进行数据提交
				if (valid) {
					this.loading = true;
					if (this.isUpdate) {
						positionUpdate(this.form.id, this.form).then(res => this.xhrMsg(res));
					} else {
						positionAdd(this.form).then(res => this.xhrMsg(res));
					}
				}
			});
		},
		//新增和删除返回相同的消息构造
		xhrMsg(res) {
			if (res.code === 0) {
				//成功提醒
				this.$notification.success({
					message: '操作成功',
					description: res.message
				});
				this.visible = false;
				this.$emit('closeFun', {
					render: true
				});
			} else {
				//错误提醒
				this.$notification.error({
					message: '操作失败',
					description: res.message
				});
			}
			this.loading = false;
		},
		//关闭弹窗
		handleCancel() {
			this.visible = false;
			this.$emit('closeFun', {
				render: false
			});
		},
		//表单初始化
		fromVal() {
			let obj = {...this.editRecord};
			if (obj.id) {
				this.form = obj;
				this.isUpdate = true;
				this.title = '编辑职务';
			}
		},
		//数据初始化
		async init() {
			this.fromVal();
		}
	},
	created() {
		this.init();
	}
};
</script>
